<template>
  <div class="page">
    <div class="operat">
      <span>回款记录（共{{ count }}条）</span>
      <span class="fr">
        <span class="pr10">实际应收金额：<span class="fc-blue">￥{{form.actualReceivable|| '0'}}</span></span>
        <span class="pr10">已回款金额：<span class="fc-blue">￥{{form.validReturnedMoney|| '0'}}</span></span>
        <span>未回款金额：<span class="fc-blue">￥{{form.noReturnedMoney|| '0'}}</span></span>
      </span>
    </div>
    <zm-table-data
      :data="tableParams.data"
      :columns="columns"
      :fetch="loadList"
      :table-params="tableParams"
    ></zm-table-data>
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import { outStandColumns } from '../const'
import {getSalePriceData, getPageList} from '@/api/src/returnedMoney'

export default {
  name: 'SaleInfo',
  components: {},
  mixins: [tableMixin],
  props: {
    obj: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      count: '',
      form: {
        saleTotalPrice: '', //  订单总金额
        yetReturnMoney: '', //  已回款金额
        noReturnedMoney: '' // 未逾期回款金额
      }
    }
  },
  computed: {
    columns () {
      return outStandColumns(this)
    }
  },
  created () {},
  methods: {
    async loadList () {
      this.form = await getSalePriceData({ orderNo: this.obj.orderNo })
      const res = await getPageList(
        this.assignQuery({ orderNo: this.obj.orderNo, listType: '1' })
      )
      this.count = res.count
      this.initialTableData(res.list, res.count)
    },
    onDetail (row) {
      console.log()
    }
  }
}
</script>

<style scoped lang="scss">
.operat {
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
}
</style>
